<section class="{{ theme }}">
  <mat-toolbar color="primary" class="demo-app-header">
    <button mat-icon-button (click)="sideNav.toggle()">
      <mat-icon>{{ sideNav.opened ? 'close' : 'menu' }}</mat-icon>
    </button>

    <span>IT鐵人賽－Angular Material Demo</span>

    <!-- 在這之後的都會被推到右邊去 -->
    <span class="toolbar-seprator"></span>

    <button mat-button (click)="toggleTheme()">切換theme</button>
    <button mat-button *ngIf="bidiMode === 'ltr'" (click)="bidiMode = 'rtl'">LTR</button>
    <button mat-button *ngIf="bidiMode === 'rtl'" (click)="bidiMode = 'ltr'">RTL</button>

    <button mat-icon-button [matMenuTriggerFor]="messageMenu" #menuTrigger="matMenuTrigger">
      <mat-icon>message</mat-icon>
    </button>
    <mat-menu #messageMenu="matMenu">
      <button mat-menu-item>最新訊息</button>
      <button mat-menu-item>訊息設定</button>
    </mat-menu>
    <button mat-icon-button>
      <mat-icon>exit_to_app</mat-icon>
    </button>
  </mat-toolbar>

  <mat-sidenav-container class="demo-app-container">
    <mat-sidenav class="demo-app-sidenav" #sideNav mode="push" (opened)="opened()" (closed)="closed()">
      <mat-nav-list>
        <h3 matSubheader>示範用頁面</h3>
        <a [routerLink]="['/', 'dashboard', 'survey']" mat-list-item>問卷調查</a>
        <a [routerLink]="['/', 'dashboard', 'blog']" mat-list-item>部落格</a>
        <a [routerLink]="['/', 'dashboard', 'inbox']" mat-list-item>收件夾</a>
        <!-- 另外一組選單 -->
        <mat-divider></mat-divider>
        <h3 matSubheader>其他頁面</h3>
        <a [routerLink]="['/', 'dashboard', 'main']" mat-list-item>首頁</a>
        <a [routerLink]="['/']" mat-list-item>Google</a>
        <a [routerLink]="['/']" mat-list-item>Facebook</a>

        <mat-divider></mat-divider>
        <mat-list-item>
          <p matLine>床前明月光</p>
          <p matLine>疑是地上霜</p>
        </mat-list-item>
        <mat-list-item>
          <p matLine>參加ＩＴ鐵人賽</p>
          <p matLine>功力增加一甲子</p>
        </mat-list-item>

        <mat-divider></mat-divider>
        <h3 matSubheader>好友訊息</h3>
        <mat-list-item>
          <img matListAvatar src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Lin_Chi-Ling_%28cropped%29.jpg" />
          <p matLine>志玲</p>
          <p matLine>hi，好久不見，最近好嗎？</p>
          <!-- button會自動被推到最後面 -->
          <button mat-icon-button>
            <mat-icon>chat</mat-icon>
          </button>
        </mat-list-item>
        <mat-list-item>
          <!-- 即使icon button放在前面，還是會被往後推 -->
          <button mat-icon-button>
            <mat-icon>chat</mat-icon>
          </button>
          <img matListAvatar src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/2008TIBE_Day4_Hall1_Cit%C3%A9Group_TheyKissAgain_SigningEvent_Ariel_Yi-cheng_Lin.jpg/440px-2008TIBE_Day4_Hall1_Cit%C3%A9Group_TheyKissAgain_SigningEvent_Ariel_Yi-cheng_Lin.jpg"
          />
          <p matLine>依晨</p>
          <p matLine>找時間吃個飯吧？</p>
        </mat-list-item>


        <mat-divider></mat-divider>
        <h3 matSubheader>
          <mat-icon>chat_bubble</mat-icon>
          新訊息
        </h3>
        <mat-list-item *ngIf="optNew.selected">這是新消息</mat-list-item>
        <mat-list-item *ngIf="optAds.selected">這是廣告消息</mat-list-item>

        <mat-divider></mat-divider>
        <h3 matSubheader>
          <mat-icon>settings</mat-icon>
          訊息設定
        </h3>
        <mat-selection-list>
          <mat-list-option [value]="1" #optNew>有新訊息時通知我</mat-list-option>
          <mat-list-option [value]="2" #optAds>顯示廣告訊息</mat-list-option>
        </mat-selection-list>
      </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav #sideNavEnd mode="side" position="end">
      <div>我是右邊選單</div>
    </mat-sidenav>

    <mat-sidenav-content [dir]="bidiMode" (dirChange)="logDirChange($event)" cdkScrollable>
      <!-- 這些練習用的code先註解起來 -->
      <!-- <div>
      <button mat-raised-button (click)="menuTrigger.toggleMenu()">開啟訊息設定</button>
    </div>
    <div>
      <div style="text-align:center">
        <button mat-raised-button [matMenuTriggerFor]="positionMenu">開啟訊息設定，這是一條比較長的按鈕，好確認Menu的生長方向</button>
      </div>
    </div>
    <div>
      <button mat-raised-button [matMenuTriggerFor]="positionMenu">巢狀選單demo</button>
      <mat-menu #positionMenu="matMenu">
        <button mat-menu-item [matMenuTriggerFor]="subMenu1">訊息1</button>
        <button mat-menu-item [matMenuTriggerFor]="subMenu2">訊息2</button>
        <mat-divider></mat-divider>
        <button mat-menu-item>訊息3</button>
      </mat-menu>

      <mat-menu #subMenu1="matMenu">
        <button mat-menu-item>
          <mat-icon>person</mat-icon>
          訊息 1-1
        </button>
        <button mat-menu-item>
          <mat-icon>favorite</mat-icon>
          訊息 1-2
        </button>
        <button mat-menu-item>
          <mat-icon>thumb_up</mat-icon>
          訊息 1-3
        </button>
      </mat-menu>

      <mat-menu #subMenu2="matMenu">
        <button mat-menu-item>
          <mat-icon>delete</mat-icon>
          訊息 2-1
        </button>
        <button mat-menu-item disabled>
          <mat-icon>settings</mat-icon>
          訊息 2-2
        </button>
      </mat-menu>
    </div>
    <mat-drawer-container style="height:100px;margin:10px;border: 1px solid black">
      <mat-drawer mode="side" opened="true">Drawer Side</mat-drawer>
      <mat-drawer-content>Content</mat-drawer-content>
    </mat-drawer-container>

    <mat-toolbar color="primary">
      <mat-toolbar-row>
        <span>第一行Toolbar</span>
        <span class="toolbar-seprator"></span>
        <mat-icon>favorite</mat-icon>
      </mat-toolbar-row>
      <mat-toolbar-row>
        第二行Toolbar
        <span class="toolbar-seprator"></span>
        <mat-icon>delete</mat-icon>
      </mat-toolbar-row>
    </mat-toolbar>

    <mat-toolbar>這是預設的toolbar</mat-toolbar>
    <mat-toolbar color="primary">這是primary的toolbar</mat-toolbar>
    <mat-toolbar color="accent">這是accent的toolbar</mat-toolbar>
    <mat-toolbar color="warn">這是warn的toolbar</mat-toolbar> -->
      <!-- <app-bidi-test></app-bidi-test> -->
      <router-outlet></router-outlet>
    </mat-sidenav-content>
  </mat-sidenav-container>
</section>
